<template>
    <div class="tree-container">
        <el-table
                border stripe
                :row-style="toggleDisplayStyle"
                :data="tableListData">
            <el-table-column
                    width="55"
                    type="index"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="权限名称"
                    min-width="200"
                    show-overflow-tooltip
                    align="left">
                <template slot-scope="scope">
                    <p :style="`margin-left: ${scope.row.__level * 30}px;`">
                        <i @click="toggleFoldingStatus(scope.row)" :class="toggleFoldingClass(scope.row)"></i>
                        <el-checkbox
                                style="margin-left: 10px;"
                                v-model="scope.row.__checked"></el-checkbox>
                        {{scope.row.Name}}
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="90"
                    prop="__level"
                    label="层级">
            </el-table-column>
            <el-table-column
                    align="left"
                    prop="__identity"
                    label="节点标识">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    show-overflow-tooltip
                    label="图标">
                <template slot-scope="scope">
                    <span>{{scope.row.Class}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="PId"
                    width="100"
                    label="Action">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import data from './data'
    import Vue from 'vue'

    export default {
        name: "treeTable3",
        data: () => ({
            tableListData: [],
            foldList: []
        }),
        computed: {
          foldAllList() {
              return this.tableListData.map(x => x.__identity);
          }
        },
        methods: {
            toggleFoldingClass(row) {
                return row.Children.length === 0 ? 'permission_placeholder' : (
                    this.foldList.indexOf(row.__identity) === -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
                )
            },
            toggleFoldingStatus(row) {
                console.log(row);
                this.foldList.includes(row.__identity) ? this.foldList.splice(this.foldList.indexOf(row.__identity), 1) : this.foldList.push(row.__identity);
            },
            toggleDisplayStyle({row, index}) {
                console.log(row, index);
                for (let i = 0; i < this.foldList.length; i++) {
                    let item = this.foldList[i];
                    if (row.__family.includes(item) && row.__identity !== item) return 'display:none;';
                }
                return '';
            },
            formatData(parent, children, index = 0, family = [], elderIdentity = 'x') {
                /*console.log(parent);
                console.log(children);
                console.log(index);
                console.log(family);
                console.log(elderIdentity);*/
                let tmp;
                if (!Array.isArray(children)) {
                    tmp = [children]
                } else {
                    tmp = children
                }
                if (children.length > 0) {
                    tmp.forEach((x, i) => {
                        Vue.set(x, '__level', index);
                        Vue.set(x, '__family', [...family, elderIdentity + '_' + i]);
                        Vue.set(x, '__identity', elderIdentity + '_' + i);
                        Vue.set(x, '__checked', false);
                        parent.push(x);
                        if (x.Children.length > 0) this.formatData(parent, x.Children, index + 1, [...family, elderIdentity + '_' + i], elderIdentity + '_' + i);
                    })
                }
                return parent;
            }
        },
        created() {
            this.tableListData = this.formatData([], data);
            console.log('扁平化之后的数据');
            console.log(this.tableListData);
        }
    }
</script>

<style scoped>
    .tree-container {
        margin: 10% 2%;
        width: 96%;
    }
</style>
